<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <title>颜色转换工具</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../static/img/favicon.ico">
    <link rel="stylesheet" href="index.css" />
    <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
    <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
</head>
<body>

<div class="wrapper" id="pageContainer">
    <div class="panel panel-default" style="margin-bottom: 0px;">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：颜色转换工具</h3>
        </div>
    </div>
    <div class="panel-body">
        <div class="row x-tips ui-mt-10">
            // 支持颜色值的RGB（RGBA）与十六进制（HEX）色值之间的互转，eg：<br>
            1、#43ad7f7f  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  =>  &nbsp;&nbsp;&nbsp;  rgba(67, 173, 127, 0.50) <br>
            2、rgb(190,20,128)  &nbsp;&nbsp;  =>  &nbsp;&nbsp;&nbsp;  #be1480
        </div>

        <div class="row">
            <h4>HEX转RGB：</h4>
            <label for="fromHEX">HEX</label>
            <input type="text" class="form-control col-input ui-mr-10" id="fromHEX" placeholder="如:#F2C685"
                   maxlength="9" v-model="fromHEX" @input="colorHexToRgb">
            <label>预览</label><div class="demo-color" :style="{background:fromHEX}">&nbsp;</div>

            <label for="toRGB" class="x-xlabel">RGB</label>
            <input type="text" class="form-control col-input" id="toRGB" readonly v-model="toRGB">
            <label>预览</label><div class="demo-color" :style="{background:toRGB}">&nbsp;</div>
        </div>

        <div class="row ui-mt-20">
            <h4>RGB转HEX：</h4>
            <label for="fromRGB">RGB</label>
            <input type="text" class="form-control col-input ui-mr-10" id="fromRGB" placeholder="如:rgb(200,100,255)"
                   maxlength="25" v-model="fromRGB" @input="colorRgbToHex">
            <label>预览</label><div class="demo-color" :style="{background:fromRGB}">&nbsp;</div>

            <label for="toHEX" class="x-xlabel">HEX</label>
            <input type="text" class="form-control col-input" id="toHEX" readonly v-model="toHEX">
            <label>预览</label><div class="demo-color" :style="{background:toHEX}">&nbsp;</div>
        </div>
    </div>
</div>
<script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
